<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>


    <style>
        .jumbotron {
            background: url(img/newsbanner.jpg);
            background-size: contain;
        }

        .container {
            background: rgb(255, 255, 255);
        }

        .headtile {
            color: bisque
        }

        .module {
            display: none
        }

        body {
            background: url(img/head.jpg);
            background-size: cover;
            /* font-family: "STXinwei"*/
        }

        .headtile {
            font-family: "STXingkai"
        }

        .navbar-header {
            font-family: "微软雅黑"
        }
    </style>
    <title>自动化测试</title>
</head>

<body>

    <div class="container">
        <div class="jumbotron">
            <div class="headtile">
                <h1>自动化测试集成</h1>
            </div>
            <div class="navbar-header" id="selectAll">
                <button type="button" class="btn btn-primary btn-default navbar-left ">全选</button>
            </div>
            <div class="navbar-header" id="disselectAll">
                <button type="button" class="btn btn-primary btn-default navbar-left ">撤销</button>
            </div>
            <a type="button" class="btn btn-success btn-lg navbar-right startbutton " id="sButton" href='#mymodal' data-toggle='modal'>
                <span class="glyphicon glyphicon-star" aria-hnameden="true"></span> Start
            </a>
        </div>

    </div>

    <div class="container">


        <ul class="nav nav-tabs">
            <li class='active'>
                <a href="">测试模块1</a>
            </li>
            <li class='active'>
                <a href="">测试模块2</a>
            </li>
            <li class='active'>
                <a href="">测试模块3</a>
            </li>
        </ul>
    </div>
    </div>

    <div class="container">
        <div class="module">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="testapi" value="1200"> 测试接口1
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="testapi" value="1400"> 测试接口2
                </label>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="module">
            <label class="checkbox-inline">
                <input type="checkbox" name="testapi" value="12001"> 测试接口03
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="testapi" value="12002"> 测试接口04
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="testapi" value="12003"> 测试接口05
            </label>
        </div>
    </div>
    <div class="container">
        <div class="module"></div>
    </div>


    <div id="mymodal" class='modal fade'>
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>请注意</h3>
                </div>
                <div class="modal-body">
                    <p>为了避免服务器压力，并加快测试流程，请手动关闭服务器核心日志log4j文件</p>
                </div>
                <div class="modal-footer">
                    <button class='btn btn-primary save'>确定</button>
                    <button class='btn btn-default' data-dismiss='modal'>取消</button>
                </div>
            </div>
        </div>
    </div>
    </div>

</body>
<script>
    $('li').mouseenter(function () {
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');
        idx = $(this).index('li');
        $('.module').eq(idx).show(100);
        $('.module').not($('.module').eq(idx)).hide(100);
    });

    $('li').click(function () {
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');
        idx = $(this).index('li');
        $('.module').eq(idx).show(100);
        $('.module').not($('.module').eq(idx)).hide(100);
    });
    /*后面测试从后台直接取值来填充列表 详见ajax内的DrawApi方法
       for (var i = 0; i < 24; i = i + 6) {
           // var $li1=$('<label class="checkbox-inline"><input type="checkbox" name="testapi" value="'+"12016"+i+'> 测试接口'+18+i+'</label>');
           //对齐版本
           var $li1 = $(
               '<div class="col-xs-12"><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) +
               '</label><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) +
               '</label><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) +
               '</label><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) +
               '</label><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) +
               '</label><label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) + '</label></div>');
           $('.module').eq(2).append($li1);

       }

     for (var i = 0; i < 24; i++) {
           //不对齐版本
           var $li2 = $(
               '<label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
               (parseInt(12016) + i) + '> 测试接口' + (17 + i) + '</label>');
           $('.module').eq(1).append($li2);
       }*/

    $('.module').eq(0).show(100);
    var arrayObj = new Array();

    $('.save').click(function () {
        //采用bootstrap悬浮窗的形式取代常规的额comfirm，使得页面更加美观
        //  var select = confirm("在大规模测试执行前，请手动关闭log4j，以提升速度，在进行单个接口测试时，可以放开log4j");
        // if (select) {
        $("input:checkbox[name='testapi']:checked").each(function () {
            arrayObj.push($(this).val());
        });
        //暂时将选中内容打印出来，后续等正式开始做交互的部分的时候再将按钮置灰处理
        // alert(arrayObj);
        //   $("#sButton").attr("disabled", true);

        var url = "http://localhost:8080/updatelist"

        //   var xmlHttpReq=new XMLHttpRequest();
        //  xmlHttpReq.open("GET",url);
        //  alert(1);
        //  xmlHttpReq.send(arrayObj);

        //将数组转换为字符串送到后台，为方便后台解析，采用“-”进行分隔
        $.ajax(url, {
            // dataType: 'json',
            crossDomain: true,
            success: function (data) {
                //   alert("测试执行完毕！");
            },
            data: {
                "arr": arrayObj.join("-")
            }
        });

        //每次提交后清除掉页面掉页面已选中值
        arrayObj = []
        //跳转到测试结果展示页面
        location.href = "./TestReasult.html";
        //  }
    });

    $("#selectAll").click(function () {
        $("input:checkbox[name='testapi']").prop("checked", true);
    });

    $("#disselectAll").click(function () {
        $("input:checkbox[name='testapi']").prop("checked", false);
    });


    //Ajax测试一下
    $(function () {
        var url = "http://localhost:8080/apilist";
        var url2 = "http://localhost:8080/apilist2" //测试使用
        //  $.get("http://localhost:8080/apilist",dataType:'jsonp',function(){
        //     alert("123");
        // });
        $.ajax(url2, {
            // dataType: 'json',
            crossDomain: true,
            success: function (data) {
                console.log("?????");
                console.log(data);
                //  alert(ListData[1].id);
                DrawApi(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status == "200") {
                    console.error(xhr);
                    console.error(ajaxOptions);
                } else {
                    console.error(xhr.status);
                    console.error(thrownError);
                }
            }
        });
    });

    function DrawApi(ListData) {
        for (var i = 0; i < ListData.length; i++) {
            //不对齐版本
            var $li3 = $(
                '<label class="checkbox-inline"><input type="checkbox" name="testapi" value=' +
                ListData[i].id + '> 测试接口' + ListData[i].name + '</label>');
            $('.module').eq(2).append($li3);
        }
    }
</script>

</html>